<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线学习平台</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="container">
            <h1>在线学习平台</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="courses.html">课程</a></li>
                    <li><a href="videos.html">视频</a></li>
                    <li><a href="about.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 侧边栏切换按钮 -->
        <button id="sidebar-toggle" type="button">打开侧边栏</button>
        <!-- 侧边导航栏 -->
        <aside class="sidebar" id="sidebar">
            <h3>课程分类</h3>
            <ul>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">数据库</a></li>
            </ul>
            <h3>热门标签</h3>
            <ul>
                <li><a href="#">前端开发</a></li>
                <li><a href="#">后端开发</a></li>
                <li><a href="#">移动开发</a></li>
                <li><a href="#">人工智能</a></li>
                <li><a href="#">云计算</a></li>
            </ul>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 轮播图模块 -->
            <section class="carousel" id="carousel">
                <!-- 左切换按钮 -->
                <button class="carousel-control carousel-control-prev" id="prevBtn" type="button">
                    <span>&lt;</span>
                </button>
                <!-- 右切换按钮 -->
                <button class="carousel-control carousel-control-next" id="nextBtn" type="button">
                    <span>&gt;</span>
                </button>
                <div class="carousel-item">
                    <img src="img/html.webp" alt="HTML5教程">
                    <div class="carousel-caption">
                        <h2>HTML5 基础到进阶</h2>
                        <p>掌握现代Web开发的基础</p>
                    </div>
                </div>
                <div class="carousel-item" style="display:none;">
                    <img src="img/javascript.webp" alt="JavaScript教程">
                    <div class="carousel-caption">
                        <h2>JavaScript 高级编程</h2>
                        <p>从入门到精通，成为前端高手</p>
                    </div>
                </div>
                <div class="carousel-item" style="display:none;">
                    <img src="img/css.webp" alt="CSS3教程">
                    <div class="carousel-caption">
                        <h2>CSS3 样式设计</h2>
                        <p>打造精美网页界面</p>
                    </div>
                </div>
            </section>

            <!-- 精品书籍推荐 -->
            <section class="book-section">
                <h2>精品书籍推荐</h2>
                <div class="books">
                    <div class="book">
                        <img src="img/html.webp" alt="Web前端开发实战">
                        <h3>Web前端开发实战</h3>
                        <p>HTML5、CSS3和JavaScript的综合应用</p>
                    </div>
                    <div class="book">
                        <img src="img/javascript.webp" alt="JavaScript高级程序设计">
                        <h3>JavaScript高级程序设计</h3>
                        <p>深入理解JavaScript核心概念</p>
                    </div>
                    <div class="book">
                        <img src="img/css.webp" alt="响应式Web设计">
                        <h3>响应式Web设计</h3>
                        <p>适配各种设备的网页开发技术</p>
                    </div>
                </div>
            </section>

            <!-- 推荐视频 -->
            <!-- <section class="video-section">
                <h2>热门视频教程</h2>
                <div class="video-container" id="main-video">
                    点击下方视频开始播放
                </div>
                <div class="video-list">
                    <div class="video-item">
                        <img src="img/html.webp" alt="HTML基础教程">
                        <h4>HTML基础教程</h4>
                    </div>
                    <div class="video-item">
                        <img src="img/css.webp" alt="CSS样式设计">
                        <h4>CSS样式设计</h4>
                    </div>
                    <div class="video-item">
                        <img src="img/javascript.webp" alt="JavaScript入门">
                        <h4>JavaScript入门</h4>
                    </div>
                </div>
            </section> -->
        </main>
    </div>

    <!-- 页脚区域 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-info">
                    <h3>关于我们</h3>
                    <p>我们是一家专注于提供优质在线教育资源的平台，帮助学员掌握实用技能，提升职业竞争力。</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="courses.html">课程</a></li>
                        <li><a href="videos.html">视频</a></li>
                        <li><a href="about.html">关于我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p>邮箱: contact@example.com</p>
                    <p>电话: 123-4567-8910</p>
                </div>
            </div>
        </div>
        <!-- 版权声明模块 -->
        <div class="copyright">
            <p>© 2023 在线学习平台 版权所有</p>
        </div>
    </footer>

    <!-- 引入外部JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>